<template>
  <main class="w-full h-full dark:bg-black p-4">
    <use-table
      :searchSelectOption="searchSelectOption"
      :columns="columns"
      :loading="loading"
      :allData="allData"
      :total="total"
      :personalized="true"
      v-model:selectedRowKey="selectedRowKey"
      v-model:visible="modifyMajorsInfoVisible"
      @modifyUserData="openClickModifyMajorsForm"
      @deleteSelectUser="deleteSelectMajors"
    >
      <template #title> 专业管理 </template>
      <template #function>
        <a-tooltip placement="bottom">
          <template #title>
            <span>添加专业</span>
          </template>
          <div class="cursor-pointer text-lg text-blue-500 mr-2" @click="openAddMajorsForm">
            <plus-circle-outlined />
          </div>
        </a-tooltip>
        <a-tooltip placement="bottom">
          <template #title>
            <span>删除选中专业</span>
          </template>
          <div class="cursor-pointer text-lg text-red-500" @click="deleteSelectMajors">
            <close-circle-outlined />
          </div>
        </a-tooltip>
      </template>
    </use-table>
    <modify-form
      @handleOk="modifyMajorsInfoOk"
      v-model:visible="modifyMajorsInfoVisible"
      :modalTitleText="modalTitleText"
    >
      <template #container>
        <div class="flex items-center">
          <span class="w-22"> 专业名称： </span>
          <a-input v-model:value="modifyMajorsForm.major_name" placeholder="修改专业名称" />
        </div>
        <div class="flex mt-3 items-center">
          <span class="w-17 text-right mr-1"> 状态： </span>
          <a-switch
            :checked="modifyMajorsForm.status === 0 ? false : true"
            checked-children="启用"
            un-checked-children="禁用"
            @click="modifyMajorsForm.status = modifyMajorsForm.status === 0 ? 1 : 0"
          />
        </div>
      </template>
    </modify-form>
    <modify-form
      @handleOk="handleAddMajorsOk"
      v-model:visible="addMajorModalVisible"
      modalTitleText="添加专业"
    >
      <template #container>
        <div class="flex items-center">
          <span class="w-22"> 专业名称： </span>
          <a-input v-model:value="addMajorForm.major_name" placeholder="输入专业名称" />
        </div>
        <div class="flex mt-3 items-center">
          <span class="w-17 text-right"> 状态： </span>
          <a-switch
            :checked="addMajorForm.status === 0 ? false : true"
            checked-children="启用"
            un-checked-children="禁用"
            @change="addMajorForm.status = addMajorForm.status === 0 ? 1 : 0"
          />
        </div>
      </template>
    </modify-form>
  </main>
</template>

<script setup lang="ts">
  import { CloseCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
  import { getMajors, deleteMajors, addMajors, modifyMajors } from '@/api/student';
  import { message } from 'ant-design-vue';
  import { Majors } from '@/utils/interface';
  let loading = ref(false);

  let allData = ref<Majors[]>([]);
  let total = ref(0);
  // 勾选的数据的key
  let selectedRowKey = ref<number[] | string[]>([]);
  // 表头
  const columns = reactive([
    {
      title: '专业名称',
      dataIndex: 'major_name',
      align: 'center',
      width: 160,
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      width: 160,
    },
    {
      title: '添加时间',
      dataIndex: 'add_time',
      align: 'center',
      width: 160,
      sorter: (a, b) => a.add_time - b.add_time,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
      width: 160,
    },
  ]);
  // 搜索框下拉列表
  const searchSelectOption: { value: string; label: string }[] = [
    {
      value: 'major_name',
      label: '专业名称',
    },
  ];
  const getAllMajors = () => {
    loading.value = true;
    getMajors().then(({ data }) => {
      loading.value = false;
      allData.value = data;
      total.value = data.length;
    });
  };
  getAllMajors();

  let addMajorForm = ref<{ major_name: string; status: number }>({
    major_name: '',
    status: 0,
  });
  let addMajorModalVisible = ref(false);
  const openAddMajorsForm = () => {
    addMajorModalVisible.value = true;
  };
  const handleAddMajorsOk = async () => {
    const { major_name } = addMajorForm.value;
    if (major_name === '') {
      message.error('请输入专业名称');
      return;
    }
    const { status } = await addMajors(addMajorForm.value);
    if (status === 200) {
      message.success('添加成功');
      addMajorForm.value = {
        major_name: '',
        status: 0,
      };
      addMajorModalVisible.value = false;
      getAllMajors();
    }
  };
  const deleteSelectMajors = async (key: any) => {
    const selectKey = Array.isArray(key) ? key : selectedRowKey.value;
    if (selectKey.length === 0) {
      message.warning('请选择要删除的专业');
      return;
    }
    const res = await deleteMajors(selectKey);
    if (res.status === 200) {
      message.success('删除成功');
      getAllMajors();
    }
  };

  let modifyMajorsInfoVisible = ref(false);
  let modalTitleText = ref('修改专业信息');
  let modifyMajorsForm = ref({
    major_name: '',
    status: 0,
    key: 0,
  });
  let openClickModifyMajorsForm = (key: number) => {
    const clickItem = allData.value.find((item: Majors) => item.key === key) as Majors;
    modalTitleText.value = `修改专业信息-${clickItem.major_name}`;
    modifyMajorsForm.value = {
      major_name: clickItem.major_name,
      status: clickItem.status,
      key: clickItem.key as number,
    };
    modifyMajorsInfoVisible.value = true;
  };

  const modifyMajorsInfoOk = async () => {
    const { major_name, status, key: id } = modifyMajorsForm.value;
    if (major_name === '') {
      message.error('请输入专业名称');
      return;
    }
    const { status: resStatus } = await modifyMajors({
      major_name,
      status,
      id,
    });
    if (resStatus === 200) {
      message.success('修改成功');
      modifyMajorsInfoVisible.value = false;
      getAllMajors();
    }
  };
</script>
